//动态渲染
function dynamicList() {
    let mockData = [
        { text: '全部', tip: '身份证实名', special: 'false' },
        { text: '生活服务', tip: '银行卡', special: 'false' },
        { text: '金融科技', tip: '短信', special: 'false' },
        { text: '交通地理', tip: '天气', special: 'false' },
        { text: '充值缴费', tip: '短信', special: 'false' },
        { text: '数据智能', tip: '手机归属地', special: 'false' },
        { text: '企业工商', tip: 'IP', special: 'false' },
        { text: '应用开发', tip: '手机归属地', special: 'false' },
        { text: '电子商务', tip: 'IP', special: 'false' },
        { text: '吃喝玩乐', tip: '视频', special: 'false' },
        { text: '文娱视频', tip: '视频', special: 'false' },
        { text: '免费接口大全', tip: '短信', special: 'true' },
        { text: '短信', tip: '身份证实名', special: 'false' },
        { text: '汽车', tip: '银行卡', special: 'false' },
        { text: '核验', tip: '银行卡', special: 'false' },
        { text: '最新发布', tip: '银行卡', special: 'true' },
        { text: 'API私有化部署', tip: '身份证实名', special: 'true' },
    ]
    let lisss = document.querySelector('.APIsort')
    let strHtml = '<h1>API分类</h1>'
    for (let i = 0; i < mockData.length; i++) {
        strHtml += `<a href='' tip='${mockData[i].tip}'>${mockData[i].text}</a>`
    }
    lisss.innerHTML = strHtml

    // 点击事件实现页面渲染效果
    let text1 = document.querySelector('main p span')
    let text2 = document.querySelector('main p input')
    lisss.onclick = (e) => {
        console.log(text1);
        console.log(text2);
        if (e.target.nodeName === 'A') {
            text1.textContent = e.target.textContent
            text2.placeholder = e.target.getAttribute('tip')
        }
        e.preventDefault()
    }
}
dynamicList()

//API分类
//鼠标移入移出
let ass = document.querySelectorAll('.APIsort a')
ass.forEach((a) => {
    a.onmouseover = () => {
        a.style.color = 'rgb(0,189,255)'
        a.style.border = '1px solid rgb(0,189,255)'
    }
    a.onmouseout = () => {
        a.style.color = '#666'
        a.style.border = '1px solid #ccc'
    }
})

// API展示部分动态渲染添加结构
let apiData = [
    [
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
    ],
    [
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
    ],
    [
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
    ],
    [
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
    ],
    [
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
    ],
    [
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
    ],
    [
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
    ],
    [
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
        { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
        { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
        { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
        { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
        { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
    ],

]
function display(apiData) {
    let ul = document.querySelector('.api-content');
    let str = '';
    for (let i = 0; i < apiData.length; i++) {
        str += `
                <li>
                  <a href="">
                    <img src="${apiData[i].src}" alt="">
                    <P class="api-title">${apiData[i].title}</P>
                    <p class="${apiData[i].price == 0 ? "green" : "red"}">${apiData[i].price == 0 ? "免费" : apiData[i].price}</p>
                  </a>
                <div class="data">申请数据</div>
              `
        if (apiData[i].special) {
            str += `<span>企业专用</span>
                </li>`
        } else {
            `</li>`
        }
    }
    ul.innerHTML = str
}
display(apiData[0])

//分页器
function skipss() {
    let spans = document.querySelectorAll('main .skip>a');
    let xia = document.querySelector('main .skip .xia')
    let index = 0
    spans.forEach((span, i) => {
        span.onclick = function (e) {
            console.log('111');
            spans[index].classList.remove('on')
            this.classList.add('on')
            index = i
            display(apiData[index])
            e.preventDefault()
        }
    })
    //给下一页注册点击事件
    xia.onclick = () => {
        spans[index].classList.remove('on')
        index++;
        if (index === 8) {
            index = 7
        }
        spans[index].classList.add('on')
        display(apiData[index])
    }
}
skipss();


// API展示部分动态效果
function apiPic() {
    let lis = document.querySelectorAll('.api-content li');
    let as = document.querySelectorAll('.api-content a');
    let datas = document.querySelectorAll('.api-content .data');
    //批量注册
    lis.forEach(function (li, i) {
        //注册鼠标移入事件
        li.onmouseover = () => {
            console.log(1111);
            as[i].classList.add('active')
            datas[i].classList.add('on')
        }
    })
    lis.forEach(function (li, i) {
        //注册鼠标移出事件
        li.onmouseout = () => {
            as[i].classList.remove('active')
            datas[i].classList.remove('on')
        }
    })
}
apiPic()
//拟态框
//拟态框点击切换页面内容
let button1 = document.querySelectorAll('.data')
let button2 = document.querySelector('.login-bg li:nth-child(1)>span')
let button3 = document.querySelector('.login-bg li:nth-child(3)>span')
let con1 = document.querySelector('.login-bg li:nth-child(1)>div')
let con2 = document.querySelector('.login-bg li:nth-child(3)>div')
let closes = document.querySelector('.login-screen>span')
let login = document.querySelector('.login-bg')
button1.forEach((li) => {
    li.onclick = () => {
        login.classList.add('on')
    }
})
button2.onclick = () => {
    button2.classList.add('on')
    button3.classList.remove('on')
    con1.classList.remove('conceal')
    con2.classList.add('conceal')
}
button3.onclick = () => {
    button3.classList.add('on')
    button2.classList.remove('on')
    con2.classList.remove('conceal')
    con1.classList.add('conceal')
}
closes.onclick = () => {
    login.classList.remove('on')
}
//输入框效果
let urs = document.querySelector('.urs input')
let pwd = document.querySelector('.pwd input')
urs.oninput = () => {
    if (urs.value.length)
        document.querySelector('.urs').classList.add('active')
    else
        document.querySelector('.urs').classList.remove('active')
}
pwd.oninput = () => {
    if (pwd.value.length)
        document.querySelector('.pwd').classList.add('active')
    else
        document.querySelector('.pwd').classList.remove('active')
}

let close1 = document.querySelector('.urs>span')
let close2 = document.querySelector('.pwd>span')
close1.onclick = () => {
    urs.value = ''
}
close2.onclick = () => {
    pwd.value = ''
}

//提示框
let submit = document.querySelector('.login-screen button')
let popup = document.querySelectorAll('.tips p')
let timerId = null
submit.onclick = () => {
    timerId = setTimeout(function () {
        popup.forEach((li) => {
            li.classList.remove('on')
        })
    }, 2000)
    if (urs.value.length < 6 || urs.value.length > 20) {
        popup[0].classList.add('on')
    } else if (pwd.value.length < 6 || pwd.value.length > 12) {
        popup[1].classList.add('on')
    } else {
        popup[2].classList.add('on')
        timerId = setTimeout(function () {
            popup.forEach((li) => {
                location = './index.html'
            })
        }, 2000)
    }
}

//点击跳转事件
let liss = document.querySelectorAll('.nav-item')
let logins = document.querySelector('.login')
let register = document.querySelector('.register')
function skip() {
    liss.forEach((li, i) => {
        li.onclick = (() => {
            if (i === 0)
                window.location.replace('./index.html')
            if (i === 1)
                window.location.replace('./API.html')
            if (i === 2)
                window.location.replace('./customer.html')
        })
    })
    logins.onclick = () => { location = './login.html' }
    register.onclick = () => { location = './register.html' }
}
skip()
let apida = document.querySelectorAll('.api-content li a')
apida.forEach((li, i) => {
    li.onclick = ((e) => {
        window.location.replace('./APIDetails.html')
        e.preventDefault()
    })
})